<template>
  <div>
    <vm-status v-if="showStatus"
               empty-text="无当前任务的鸡舍信息"></vm-status>

    <scroller v-else
              :show-scrollbar="false">
      <div class="td-row">
        <text class="td-text text-muted td-static">鸡舍号</text>
        <text class="td-text text-muted td-static">日龄</text>
        <text class="td-text text-muted td-static">存栏量</text>
        <text class="flex-2 text-td text-muted">死鸡数(羽)</text>
        <text class="flex-2 text-td text-muted pr-1">淘汰数(羽)</text>
      </div>
      <div>
        <div v-for="(house, index) in houses"
             :key="index"
             class="td-row">
          <text class="td-text td-static">{{house.house_no}}栋</text>
          <text class="td-text td-static">{{house.day_age}}</text>
          <text class="flex-2 td-text">{{house.current_amount}}</text>
          <div class="flex-2 flex-row py-1 pr-1">
            <text v-if="viewMode"
                  class="text-td flex">{{house.die_num}}</text>
            <input v-else
                   type="number"
                   placeholder="请填写"
                   v-model="house.die_num"
                   class="input"
                   @focus="handleInputFocus(index, 'die_num')"
                   @blur="handleInputBlur(index, 'die_num')" />
          </div>
          <div class="flex-2 flex-row py-1 pr-1">
            <text v-if="viewMode"
                  class="text-td flex">{{house.eli_num}}</text>
            <input v-else
                   type="number"
                   placeholder="请填写"
                   v-model="house.eli_num"
                   class="input"
                   @focus="handleInputFocus(index, 'eli_num')"
                   @blur="handleInputBlur(index, 'eli_num')" />
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>
<script>
import VmStatus from '../../components/vm-status.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'
import { trim, debounce } from '../../plugins/utils.js'

export default {
  components: { VmStatus },
  props: {},
  data() {
    return {
      hasFetch: false,
      viewMode: false,
      farm: {},
      task: {},
      houses: [],
      focusIndex: -1,
      focusKey: ''
    }
  },
  computed: {
    showStatus() {
      return this.hasFetch && !this.houses.length
    }
  },
  watch: {},
  eros: {
    beforeDisappear() {
      if (this.focusIndex !== -1) {
        this.handleInputBlur(this.focusIndex, this.focusKey)
      }
    }
  },
  created() {
    this.getFarm()
  },
  mounted() { },
  methods: {
    getFarm() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (this.farm.id) {
        this.getParams()
      } else {
        this.hasFetch = true
        this.$notice.toast({ message: '没有鸡场信息' })
        this.$router.setBackParams({ type: 1 })
      }
    },
    async getParams() {
      const res = await this.$router.getParams()

      this.viewMode = res && res.viewMode
      this.task = (res && res.task) || {}
      if (!this.task.task_id) {
        this.hasFetch = true
        return this.$notice.toast({ message: '无任务详情' })
      }

      this.getData()
    },
    async getData() {
      const [houses] = await this.$utils.pm(this.getTaskDetail(true))
      this.hasFetch = true
      this.houses = houses
    },
    getTaskDetail(showLoading = false) {
      return new Promise((resolve, reject) => {
        showLoading && this.$notice.loading.show("获取任务...")
        this.$api.getData({
          server: 'agr_chain',
          table: 'task_list_detail_view',
          params: {
            'task_id.eq': this.task.task_id
          },
          errorMsg: '获取数据失败'
        }).then(res => {
          resolve(res || [])
        }).catch(err => {
          reject(err)
        }).finally(() => {
          showLoading && this.$notice.loading.hide()
        })
      })
    },
    handleInputFocus(index, key) {
      this.focusIndex = index
      this.focusKey = key
    },
    handleInputBlur: debounce(function (index, key) {
      this.focusIndex = -1
      const house = this.houses[index]
      const value = trim(house[key])
      if (!value) { return }

      const data = {
        chick_house_enter_id: house.chick_house_enter_id
      }
      data[key] = value

      const id = house.base_produce_log_id
      if (id) {
        this.updateData(id, data)
      } else {
        this.addData(data)
      }
    }, 100),
    addData(data) {
      data.log_time = this.task.create_time

      this.$api.addData({
        server: 'agr_chain',
        table: 'base_produce_log',
        data,
        errorMsg: '修改失败，请重试！'
      }).then(res => {
        this.getData()
        this.$router.setBackParams({ type: 3 })
      })
    },
    updateData(id, data) {
      this.$api.updateData({
        server: 'agr_chain',
        table: 'base_produce_log',
        id,
        data,
        errorMsg: '修改失败，请重试！'
      }).then(res => {
        this.getData()
        this.$router.setBackParams({ type: 3 })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.text-muted {
  color: #999;
}
.text-td {
  font-size: 25px;
  text-align: center;
}

.py-1 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pr-1 {
  padding-right: 10px;
}

.td-row {
  width: 750px;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.td-text {
  text-align: center;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.td-serial {
  width: 80px;
  text-align: center;
  font-size: 25px;
}
.td-static {
  width: 150px;
}

.input {
  flex: 1;
  border-width: 1px;
  border-color: $border-color;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 26px;
  padding-left: 10px;
  padding-right: 10px;
  tint-color: #999;
}
.unit-text {
  font-size: 26px;
  background-color: $border-color;
  height: 60px;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  color: #666;
  margin-right: 10px;
}
</style>
